html, body {
  position: relative;
  height: 100%;
  width:100%
}
body {
  background: #888888;
  background-image: url("../images/card/make_bg.jpg");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: auto 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
  text-align: center;
}
h1 {
  font-size: 30px;
  /*height: 10%;*/
  /*line-height: 50px;*/
  color:#fff;
  text-align: center;
  vertical-align:middle;
  margin: 0;
  /*padding-top: 30px;*/
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 999;

  -webkit-text-shadow: 1px 1px 3px #444444;
  text-shadow: 1px 1px 3px #444444;
}

.transparent{
  opacity: 0;
}
.disp_hide{
  display: none;
}

.to_btn{
  height: 7%;
}

.to_bf{
  position: absolute;
  top: 4%;
  left: 50%;
  -webkit-transform: translate(-110%, 0);
  transform: translate(-110%, 0);
}

.to_gf{
  position: absolute;
  top: 4%;
  left: 50%;
  -webkit-transform: translate(10%, 0);
  transform: translate(10%, 0);
}

.to_bro{
  position: absolute;
  top: 12.5%;
  left: 50%;
  -webkit-transform: translate(-110%, 0);
  transform: translate(-110%, 0);
}

.to_mi{
  position: absolute;
  top: 12.5%;
  left: 50%;
  -webkit-transform: translate(10%, 0);
  transform: translate(10%, 0);
}

.to_frid{
  position: absolute;
  top: 21%;
  left: 50%;
  -webkit-transform: translate(-110%, 0);
  transform: translate(-110%, 0);
}

.to_stud{
  position: absolute;
  top: 21%;
  left: 50%;
  -webkit-transform: translate(10%, 0);
  transform: translate(10%, 0);
}

.from_name{
  position: absolute;
  top:33%;
  left:50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  height:6%;

  -webkit-box-shadow: 2px 2px 10px #886666;
  box-shadow: 2px 2px 10px #886666;
  border-radius: 6px;

  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 18px;

  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 100% 100%;
  opacity: 0.8;
}

.btn_vid_frame{
  position: absolute;
  top:49%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height:15%;
 }

.btn_video{
  position: absolute;
  top:49%;
  left:50%;
  height:12%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align : center;

  background-image: url('');
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: auto 100%;
}
#btn_video{
  height:100%;
}

.btn_tip{
  position: absolute;
  top:58%;
  left:50%;
  -webkit-transform: translate(-50%, -30%);
  transform: translate(-50%, -30%);
  height:2.5%;
}

.btn_apply{
  position: absolute;
  top:62%;
  left:50%;
  height:9%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-align : center;
  /*-webkit-animation: breath_apply 1.8s ease-in-out 0s infinite;*/
  /*animation: breath_apply 1.8s ease-in-out 0s infinite;*/
}
.img_apply{
  height:100%;
}
@-webkit-keyframes breath_apply{
  0%{-webkit-transform:translate(-50%, 0%) scale(1,1)}
  40%{-webkit-transform:translate(-50%, 0%) scale(0.9,0.9)}
  100%{-webkit-transform:translate(-50%, 0%) scale(1,1)}
}
@keyframes breath_apply{
  0%{transform:translate(-50%, 0%) scale(1,1)}
  40%{transform:translate(-50%, 0%) scale(0.9,0.9)}
  100%{transform:translate(-50%, 0%) scale(1,1)}
}
.breath{
  -webkit-animation: breath 1.8s ease-in-out 0s infinite;
  animation: breath 1.8s ease-in-out 0s infinite;
}


.back_mask{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: #111111;
  opacity: 0.85;
  z-index: 1001;
}
.proc_img{
  position: absolute;
  left: 50%;
  top: 50%;
  height:30%;
  z-index: 1002;
  /*-ms-transform: translate(-50%, -50%);*/
  /*-webkit-transform: translate(-50%, -50%);*/
  /*-moz-transform: translate(-50%, -50%);*/
  /*transform: translate(-50%, -50%);*/
  -webkit-animation: breath2 2s ease-in-out 0s infinite;
  animation: breath2 2s ease-in-out 0s infinite;
}
.upload_img{
  position: absolute;
  left: 50%;
  top: 50%;
  height:18%;
  z-index: 1002;
  /*-ms-transform: translate(-50%, -50%);*/
  /*-webkit-transform: translate(-50%, -50%);*/
  /*-moz-transform: translate(-50%, -50%);*/
  /*transform: translate(-50%, -50%);*/
  -webkit-animation: breath2 2s ease-in-out 0s infinite;
  animation: breath2 2s ease-in-out 0s infinite;
}

@-webkit-keyframes breath{
  0%{-webkit-transform:scale(1,1)}
  40%{-webkit-transform:scale(0.85,0.85)}
  100%{-webkit-transform:scale(1,1)}
}
@keyframes breath{
  0%{transform:scale(1,1)}
  40%{transform:scale(0.85,0.85)}
  100%{transform:scale(1,1)}
}

@-webkit-keyframes breath2{
  0%{-webkit-transform:translate(-50%, -50%) scale(1,1)}
  40%{-webkit-transform:translate(-50%, -50%) scale(0.85,0.85)}
  100%{-webkit-transform:translate(-50%, -50%) scale(1,1)}
}
@keyframes breath2{
  0%{transform:translate(-50%, -50%) scale(1,1)}
  40%{transform:translate(-50%, -50%) scale(0.85,0.85)}
  100%{transform:translate(-50%, -50%) scale(1,1)}
}